<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
           <el-form-item label="报告类型">
            <el-select v-model="queryParams.reportType" clearable placeholder="请选择报告类型" style="width: 200px;">
               <el-option v-for="item in reportList" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
           </el-form-item>
           <el-form-item label="日期范围">
            <el-date-picker
                v-model="queryParams.startAndEndDate"
                type="monthrange"
                range-separator="至"
                value-format="YYYY-MM"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
            />
           </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
       <!-- 表格数据 -->
        <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center" width="55"/>
            <el-table-column label="所属服务区" align="center" prop="serviceName" />
            <el-table-column label="报告名称" align="center" prop="name" />
            <el-table-column label="时间周期" align="center" prop="timePeriod" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link icon="Search" type="primary" @click="lookDetails(scope.row)" v-hasPermi="['remoteInspection:patrolReport:view']">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getTableData"
        />
        <el-dialog title="巡店报告" v-model="reportDialog" width="900px">
            <div v-loading="dialogLoading">
                <el-descriptions border>
                    <el-descriptions-item label-align="left" label="总门店">{{ reportDetailsData.mainStore }}</el-descriptions-item>
                    <el-descriptions-item label-align="left" label="所属区域">{{ reportDetailsData.area }}</el-descriptions-item>
                    <el-descriptions-item label-align="left" label="检查门店">{{ reportDetailsData.inspectTheStore }}</el-descriptions-item>
                    <el-descriptions-item label-align="left" label="检查项总数">{{ reportDetailsData.checkTotal }}</el-descriptions-item>
                    <el-descriptions-item label-align="left" label="问题总数">{{ reportDetailsData.problemTotal }}</el-descriptions-item>
                    <el-descriptions-item label-align="left" label="问题整改数">{{ reportDetailsData.problemRectifyNumber }}</el-descriptions-item>
                    <el-descriptions-item label-align="left" label="巡店日期">{{ reportDetailsData.visitDate }}</el-descriptions-item>
                    <el-descriptions-item label-align="left" label="巡店人员">{{ reportDetailsData.visitUser }}</el-descriptions-item>
                    <el-descriptions-item label-align="left" label="负责人">{{ reportDetailsData.principalUser }}</el-descriptions-item>
                </el-descriptions>
                <div class="problem-list">
                    <div v-for="(item,index) in reportDetailsData.detailsList" :key="item.id">
                        <h4><span>{{ index + 1 }}</span>{{ item.area }}</h4>
                        <ul>
                            <li>
                                <div>检查项</div>
                                <p>{{ item.checkProject }}</p>
                            </li>
                            <li>
                                <div>详细说明</div>
                                <p class="detailed">{{ item.description }}</p>
                            </li>
                            <li>
                                <div style="margin-bottom: 14px;">问题图片</div>
                                <el-image
                                    style="width: 100px; height: 100px"
                                    :src="srcList[0]"
                                    :zoom-rate="1.2"
                                    :max-scale="7"
                                    :min-scale="0.2"
                                    :preview-src-list="srcList"
                                    :initial-index="0"
                                    :infinite="false"
                                    fit="cover"
                                >
                                    <template #error>
                                        <div class="image-slot">
                                            暂无图片
                                        </div>
                                    </template>
                                </el-image>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { getReportData, getDetails } from "@/api/remoteInspection/patrolReport";

const srcList = [
  new URL('@/assets/images/img01.jpg', import.meta.url).href,
  new URL('@/assets/images/img02.jpg', import.meta.url).href,
  new URL('@/assets/images/img03.jpg', import.meta.url).href,
]
const loading = ref(false);
const dialogLoading = ref(false);
const reportDialog = ref(false);
const total = ref(0);
const reportDetailsData = ref({})
const queryParams = reactive({
    pageNum: 1,
    pageSize: 10,
    reportType: 2,
    startAndEndDate: [],
})
const reportList = ref([
    {
        label: "巡店周报",
        value: 1,
    },
    {
        label: "巡店月报",
        value: 2,
    }
])

const tableData = ref([])

onMounted(() => {
    getTableData()
})

//获取列表数据
const getTableData = () =>{
    let params = {
        pageNum: queryParams.pageNum,
        pageSize: queryParams.pageSize,
        reportType: queryParams.reportType,
        startDateTime: queryParams.startAndEndDate[0] || '',
        endDateTime: queryParams.startAndEndDate[1] || '',
    }
    loading.value = true
    getReportData(params).then(res =>{
        tableData.value = res.rows
        total.value = res.total
        loading.value = false
    }).catch((err) => (loading.value = false));
}

// 搜索
const handleQuery = () =>{
    queryParams.pageNum = 1
    queryParams.pageSize = 10
    getTableData()
}

// 重置
const resetQuery= () =>{
    Object.assign(queryParams, {
        pageNum: 1,
        pageSize: 10,
        reportType: '',
        startAndEndDate: [],
    })
    getTableData()
}

//多选框选中数据
const handleSelectionChange = (selection) =>{

}

//查看
const lookDetails = (row) =>{
    reportDialog.value = true
    dialogLoading.value = true
    reportDetailsData.value = {}
    getDetails(row, queryParams.reportType).then(res =>{
        reportDetailsData.value = res.data
        dialogLoading.value = false
    }).catch(err =>{dialogLoading.value = false})
}

</script>

<style lang="scss" scoped>
:deep .el-form{
    .el-form-item{
        .el-form-item__label{
            justify-content: flex-start;
        }
    }
 }
 ul.check-resule{
    li{
        display: flex;
        margin-bottom: 10px;
        span:first-child{
            width: 80px;
            display: inline-block;
        }
    }
 }
 .problem-list{
    >div{
        h4{
            font-weight: bold;
            font-size: 18px;
            display: flex;
            align-items: center;
            span{
                display: inline-block;
                width: 25px;
                height: 30px;
                line-height: 30px;
                background-color: darkgoldenrod;
                color: #fff;
                font-size: 14px;
                border-radius: 5px;
                text-align: center;
                margin-right: 10px;
            }
        }
        ul{
            padding-left: 30px;
            li{
                border-bottom: 1px solid #e6e6e6;
                margin-bottom: 10px;
                div{
                    color: gray;
                    font-weight: bold;
                }
                p.detailed{
                    color: blue;
                }
            }
            li:last-child{
                border-bottom: none;
            }
        }
    }

 }

 :deep .el-dialog{
    .el-dialog__body{
        height: 500px;
        overflow-y: auto;
    }
 }

</style>